<template>
  <div class="search-box-container">
    <el-input placeholder="请输入搜索内容" v-model="searchText" @keyup.enter.native="searchData()">
        <el-button  slot="append" @click="queryData()">查 询</el-button>
    </el-input>
  </div>
</template>

<script>
export default {
  name: "searchBox",
  data() {
    return {
      searchText: "",
    };
  },
  methods: {
    searchData(){
      // console.log(111);
    },
    queryData() {
      if (this.searchText == "") {
        this.$message({
          type: "error",
          message: "输入框不能为空！",
        });
        return;
      }
      this.$router.push({ path: "./search", query: { text: this.searchText } });
    },
  },
};
</script>

<style lang="less">
.search-box-container {
  display: flex;
  flex-wrap: nowrap;
  height: 48px;
  .el-input__inner {
    height: 48px;
    font-size: 18px;
  }
  .el-input-group__append {
    color: #fff;
    height: 48px;
    width: 120px;
    text-align: center;
    background-color: #24a5e0;
    border: 1px solid #24a5e0;
    cursor: pointer;
    font-size: 22px;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
}
</style>
